<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
   <title>首页</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <style>
      table {
         margin: auto;
      }

      td {
         font-size: 18px;
      }
      #login {
         position: absolute;
         top: 10px;
         left: 1550px;
         /*float: left;*/
      }
      ul li{

         list-style: none;
         float: left;

         margin-left: 15px;

      }
      ul:after{
         content: '';
         display: block;
         width: 0;
         height: 0;
         clear: both;
      }
      a {
         text-decoration:none;
         color: black;
      }
      .container1 {
         float: left;
      }
   </style>

</head>
<body>
<div style="height: 1080px;width: 100%" >
   <div class="container" style="border: red" id="container" >
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                     &times;
                  </button>
               </div>
               <div class="modal-body" id="modal-body">

               </div>
            </div><!-- /.modal-content -->
         </div><!-- /.modal -->
      </div>
   </div>
   <div id="login">
      <ul>
         <li><a href="/user/map">区域地图</a></li>
         <li><a href="/Question/queryAll">问卷调查</a></li>
         <li><a href="/chat/chatroom">在线客服</a></li>
         <li><shiro:hasAnyRoles name="vip,docter,youke">
             <a href="/user/logout">退出登录</a>
         </shiro:hasAnyRoles>
             <shiro:guest >
                 <a href="/user/login">请登录</a>
             </shiro:guest></li>
      </ul>
   </div>
   <div style="height: 30%"><img src="/static/img/bian1.jpg" alt="" style="align-content: center;margin-top: -220px">
   </div>

      <%--<div class="container1" >--%>
      <%--<h2>最新公告</h2>--%>
      <%--<ul class="nav flex-column">--%>
      <%--</ul>--%>
      <%--<!-- 公告信息模态框 -->--%>
      <%--<div class="modal fade" id="myModal">--%>
         <%--<div class="modal-dialog">--%>
            <%--<div class="modal-content">--%>

               <%--<!-- 模态框头部 -->--%>
               <%--<div class="modal-header">--%>
                  <%--<h4 class="modal-title">公告内容</h4>--%>
                  <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
               <%--</div>--%>

               <%--<!-- 模态框主体 -->--%>
               <%--<div class="modal-body">--%>
                  <%--<textarea class="notice_content"  name="notice_content" cols="60"   rows="8"    style="OVERFLOW:   hidden" readonly></textarea>--%>
               <%--</div>--%>

               <%--<!-- 模态框底部 -->--%>
               <%--<div class="modal-footer">--%>
                  <%--<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>--%>
               <%--</div>--%>

            <%--</div>--%>
         <%--</div>--%>
   <%--</div>--%>
      <%--</div>--%>
   <div style="height: 60%;margin-top: 100px">
      <table cellpadding="30">
         <tr>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=1">思明区</a></h2></td>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=2">湖里区</a></h2></td>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=4">同安区</a></h2></td>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=6">翔安区</a></h2></td>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=3">集美区</a></h2></td>
            <td><h2><a href="/hospital/hospitalByArea?hospital_area=5">海沧区</a></h2></td>
         </tr>
      </table>
      <table style="   width: 50%;
            border: 1px solid blue;
            margin: auto;">
         <tr>
            <td>医院id</td>
            <td>医院名字</td>
            <td>医院地址</td>
            <td>所属分区</td>
            <td>操作</td>
         </tr>
         <c:forEach items="${list}" var="l">
            <tr>
               <td>${l.hospital_id}</td>
               <td>${l.hospital_name}</td>
               <td>${l.hospital_site}</td>
               <td>${l.area_name}</td>
               <td onclick="yuyue()">预约</td>
            </tr>


         </c:forEach>


      </table>

   </div>
</div>
<jsp:include page="china.jsp"></jsp:include>

<script>
   // $(function(){
   //    var data={
   //    }
   //    $.ajax({
   //       url:"/notice/query10.do",
   //       type:"get",
   //       dataType:"json",
   //       success:function (data) {
   //          var str = "";
   //          for (var i=0;i<data.length;i++){
   //
   //             str+='<li class="nav-item" "> <a id="notice_title" class="nav-link" data-toggle="modal" data-target="#myModal"  onclick="NoticeDetail("'+data[i].notice_content+'")">'+data[i].notice_title+'</a> <input type="hidden" id="notice_content'+data[i].notice_id+'" value="'+data[i].notice_content+'">  </li>'
   //          }
   //          // $("#container").html(str);
   //       },
   //    })
   // });
   // $(function () {
   //    // var notice_content = document.getElementById("notice_content1").value;
   //    //绑定模态框展示的方法
   //    window.NoticeDetail = function (notice_content) {
   //       $("#notice_content1").val(notice_content);
   //       $('#myModal').modal('show');
   //    }
   //    $('#myModal').on('show.bs.modal', function (event) {
   //       var notice_content = $("#notice_content1").val();
   //       var modal = $(this);  //get modal itself
   //       modal.find('.notice_content').val(notice_content);
   //    });
   // })
   $(function(){
      $('#myModal').modal('show')
      var data={
         "advert_id":1

      }
      $.ajax({
         url:"/advert/query1.do",
         type : "post",
         data: JSON.stringify(data),
         success:function (advert) {
            var str = '<img src="'+advert.advert_image+'" onclick="dolink()"><input type="hidden" id="advert_link" value="'+advert.advert_link+'">';
            $("#modal-body").html(str);

         },
         dataType: "json",
         contentType: "application/json"
      })
   });
   function dolink() {
      var advert_link = document.getElementById("advert_link").value;
      window.location.href=advert_link;
   }
</script>
</body>
</html>
